<template>
  <div class="app-container" >

    <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 1px 0  25px 0">

      <p style="border-bottom:1px solid #E8E8E8  ;padding-bottom:20px">&nbsp;&nbsp;&nbsp;&nbsp;修改快递员</p>
      <el-form label-width="120px">
        <el-form-item label="快递员姓名">
          <el-input v-model="courier.cname" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="courier.cphone"/>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="courier.identify"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="courier.cpassword" type="password"/>
        </el-form-item>

        <!-- 讲师头像：TODO -->
        <!-- 讲师头像：TODO -->
        <el-form-item label="头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="courier.img" />
          <!-- 文件上传按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            @click="imagecropperShow = true">更换头像
          </el-button>

          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
        -->
          <image-cropper
            v-show="imagecropperShow"
            :width="300"
            :height="300"
            :key="imagecropperKey"
            :url="BASE_API + '/e/fileoss/upload'"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import courier from '@/api/e/courier/courier'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  components: { ImageCropper, PanThumb },
  data() {
    return {
      courier: {
        cname: '',
        cphone: '',
        identify: '',
        cpassword: '',
        img: 'https://edu-default-images.oss-cn-shenzhen.aliyuncs.com/2022/09/21/f6b2b0822c644fd895290ef3db833d8eCoolTiger.jpeg'
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      // 上传弹框组件是否显示
      imagecropperShow: false,
      // 上传组件key值
      imagecropperKey: 0,
      // 获取dev.env.js中的地址
      BASE_API: process.env.BASE_API
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      const id = this.$route.params.id
      this.updateCourierInfo(id)
    }
  },
  methods: {
    // 关闭上传弹窗的方法
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 上传成功方法
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.courier.img = data.url
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 该方法要实现添加和修改两个功能
    saveOrUpdate() {
      // 判断是修改还是添加
    // 根据teacher是否有id
      this.saveBtnDisabled = true
      if (!this.courier.id) {
        this.add()
      } else {
        this.updateCourier()
      }
    },
    // 根据讲师id查询讲师
    updateCourierInfo(id) {
      courier.getCourierInfo(id).then(response => {
        this.courier = response.data.courier
      })
    },
    // // 根据id更新记录
    updateCourier() {
      this.saveBtnDisabled = true
      courier.updateCourierById(this.courier).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        // 重新查询数据，路由跳转
        this.$router.push({ path: '/e/courier' })
      })
    }
  }

}
</script>
